<!DOCtype html>
<html ng-app="advertiserApp">
	 <head>
	     <meta charset= "utf-8"/>
		 <title>视频广告</title>
		 <script type="text/javascript" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/vendor/angular/angular.min.js"></script>
		 <script type="text/javascript" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/vendor/jquery/dist/jquery.min.js"></script>		 		 
		 <script type="text/javascript" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/vendor/bootstrap/dist/js/bootstrap.min.js"></script>			
		 <script type="text/javascript" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/js/mainApp.js"></script>			 			 
		 <script type="text/javascript" src="/Lvscore_Advertiser_Maven/advertiserWeb/controller/advertiserCtrl.js"></script>	        	
		 <script type="text/javascript" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/js/main.js"></script>	
		 <script type="text/javascript" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/js/ajaxupload.js"></script>	
		 <link rel="stylesheet" href="/Lvscore_Advertiser_Maven/advertiserWeb/static/vendor/bootstrap/dist/css/bootstrap.min.css" />
		 <link rel="stylesheet" href="/Lvscore_Advertiser_Maven/advertiserWeb/static/vendor/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" />
		 <link rel="stylesheet" href="/Lvscore_Advertiser_Maven/advertiserWeb/static/styles/layout.css" />
		 <link rel="stylesheet" href="/Lvscore_Advertiser_Maven/advertiserWeb/static/styles/main.css" />
		 <link rel="shortcut icon" href="/Lvscore_Advertiser_Maven/advertiserWeb/static/favicon.ico" />
		 <link rel="bookmark" href="/Lvscore_Advertiser_Maven/advertiserWeb/static/favicon.ico" />
		 <style type="text/css">
		     .uploadRateBar{width:100%;float:left;margin-top:30px;text-align:center}
			 .uploadRateBar .uploadRateBarBox{width:70%;margin:50px auto 20px auto;height:40px;background:#478DF1;}
			 .uploadRateBar .uploadRateBarBox span{display:block;width:0%;height:40px;background:#FF9933;}
			 .adTarget ul li img{cursor:pointer}

			 /* 验证样式 */
			 .add{position:absolute;line-height:50px;color:#d7000f;font-size:14px;top:0;right:0;}
			 .addPatternSpan{right:-123px;top:0;}
			 .form-group{position:relative}
			 #urlPat{right:-80px;top:0}
			 #timePat{top:0;line-height:34px;left:320px;}
			 .changelineH{line-height:34px;}
			 #keyPat{top:0;}
			 #adNameSpan{top:0;right:-123px;}
			 #mustVal{top:0;right:0}
			 
			 .content .adTargetModalBox{position:relative}
			 .content .adTargetModalBox .targetAlert{position:absolute;color:red;width:400px;top:-18px;left:50px;}
			 
			 #adDescribeBox{position:relative;}
			 #textAlert{color:#cbd1db;position:absolute;bottom:0;right:46px;line-height:32px;}
		 </style>
	 </head>
	 <body ng-controller="advertiserCtrl">	
         <div class="headerBox"></div>
         <div class="nav"><ul></ul></div>
		 <form class="content" name="registerForm" novalidate>
         <!-- begin -->		 
		     <div class="websiteMapBox">
			     <span>当前页面></span>
				 <span>视频广告</span>
			 </div>
		     <div class="itemAdForm">
			     <div class="form-group form-inline">
				     <label class="rightAlign"><span style='color:#d7000f;margin-left:-6px;' >*</span>广告名称：</label>
				     <input type="text" class="form-control" id="adName" name="adname" ng-model="vedioad.adname" required maxlength="30"/>
				     <span class="add" id="mustVal"></span>		
				 </div>
				 <div class="form-group form-inline">
				     <label class="rightAlign"><span style='color:#d7000f;margin-left:-6px;' >*</span>广告链接：</label>
				     <input type="text" class="form-control" id="advUrl" name="adurl" ng-model="vedioad.adurl" required/>
				     <span class="add" id="urlspan"></span>
				 </div>			  
				 <div class="form-group form-inline" id="adDescribeBox">
				     <label class="rightAlign left" style="line-height:52px;"><span style='color:#d7000f;margin-left:-6px;' >*</span>广告描述：</label>
				     <textarea align="left" class="form-control textareaForm left" maxlength="200" rows="1" value="" id="description"
				     name="addescribe" ng-model="vedioad.describe" required></textarea>
				     <span class="add" id="descriptspan"></span>
					 <span id="textAlert">限200字以内</span>
					 <div class="clear"></div>
				 </div>	
			 </div>
			 
		     <div class="itemAdGroup">
			     <div class="topTitle">
				     <button class="btn btn-primary btnTitle">视频封面上传</button>
				 </div>
				 <div class="adCoverUpload">
				     <img id="adHomeImage" src="" alt="" />
					 <p>支持<span>jpg、gif、png</span>格式，单照照片<span>10K-10M</span>之间，如果无法上传图像，请核实图片大小和格式。</p>					 
					 <div class="uploadBtnBg">
					    <input class="uploadBtnHandle" type="file" name="file" value="" onchange="uploadImg.changeHomeImage(this,$(this))" id="putcover"/>
					 </div>
				 </div>				 				 
			 </div>
		     <div class="itemAdGroup">
			     <div class="topTitle">
				     <button class="btn btn-primary btnTitle">广告投放关键字</button>				 
				 </div>				 				 
			 </div>
			 <div class="itemAdForm">
			     <div class="form-group form-inline">
				     <label class="rightAlign"><span style='color:#d7000f;margin-left:-6px;' >*</span>关键字一：</label>
				     <input type="text" maxlength="12" class="form-control" id="key1" name="keyname" ng-model="videoad.keyname" required/>		
					 <span id="keyPat" class="add"></span>			 
				 </div>			     
				 <div class="form-group form-inline">
				     <label class="rightAlign">关键字二：</label>
				     <input type="text" maxlength="12"  class="form-control" id="key2" name="keyname"/>
				     <span id="keyPat2" class="add addPatternSpan">*由中文、数字、英文组成</span>						 
				 </div>		
				 <div class="form-group form-inline">
				     <label class="rightAlign">关键字三：</label>
				     <input type="text"  maxlength="12" class="form-control" id="key3" name="keyname"/>
				     <span id="keyPat3" class="add addPatternSpan">*由中文、数字、英文组成</span>					 
				 </div>		
				 <div class="form-group form-inline">
				     <label class="rightAlign">关键字四：</label>
				     <input type="text"  maxlength="12" class="form-control" id="key4" name="keyname"/>
				     <span id="keyPat4" class="add addPatternSpan">*由中文、数字、英文组成</span>				 
				 </div>		
				 <div class="form-group form-inline">
				     <label class="rightAlign">关键字五：</label>
				     <input type="text"  maxlength="12" class="form-control" id="key5" name="keyname"/>
				     <span id="keyPat5" class="add addPatternSpan">*由中文、数字、英文组成</span>					 
				 </div>		
				 <div class="form-group form-inline">
				     <label class="rightAlign">关键字六：</label>
				     <input type="text"  maxlength="12" class="form-control" id="key6" name="keyname"/>
				     <span id="keyPat6" class="add addPatternSpan">*由中文、数字、英文组成</span>					 
				 </div>		
			 </div>			 
			 <div class="itemAdGroup">
			     <div class="topTitle">
				     <button class="btn btn-primary btnTitle">广告属性标签</button>				 
				 </div>
				 <div class="adTarget">
				     <ul class="adTargetModalBox">
						 <li id="targetLi"><img data-target="0" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/genre_pic1000.png" alt=""  id="1000"/>
						     <span class="targetAlert">*请您选择广告属性标签！（最多选择六个）</span>
						 </li>
						 <li><img data-target="0" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/genre_pic1001.png" alt=""  id="1001"/></li>
						 <li><img data-target="0" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/genre_pic1002.png" alt=""  id="1002"/></li>
						 <li><img data-target="0" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/genre_pic1003.png" alt=""  id="1003"/></li>
						 <li><img data-target="0" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/genre_pic1004.png" alt=""  id="1004"/></li>
						 <li><img data-target="0" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/genre_pic1005.png" alt=""  id="1005"/></li>
						 <li><img data-target="0" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/genre_pic1006.png" alt=""  id="1006"/></li>
						 <li><img data-target="0" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/genre_pic1007.png" alt=""  id="1007"/></li>
						 <li><img data-target="0" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/genre_pic1008.png" alt=""  id="1008"/></li>
						 <li><img data-target="0" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/genre_pic1009.png" alt=""  id="1009"/></li>
						 <li><img data-target="0" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/genre_pic1010.png" alt=""  id="1010"/></li>
						 <li><img data-target="0" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/genre_pic1011.png" alt=""  id="1011"/></li>
						 <li><img data-target="0" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/genre_pic1012.png" alt=""  id="1012"/></li>
						 <li><img data-target="0" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/genre_pic1013.png" alt=""  id="1013"/></li>
						 <li><img data-target="0" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/genre_pic1014.png" alt=""  id="1014"/></li>
						 <li><img data-target="0" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/genre_pic1015.png" alt=""  id="1015"/></li>
						 <li><img data-target="0" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/genre_pic1016.png" alt=""  id="1016"/></li>
						 <li><img data-target="0" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/genre_pic1017.png" alt=""  id="1017"/></li>
						 <li><img data-target="0" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/genre_pic1018.png" alt=""  id="1018"/></li>
						 <li><img data-target="0" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/genre_pic1019.png" alt=""  id="1019"/></li>
						 <li><img data-target="0" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/genre_pic1020.png" alt=""  id="1020"/></li>
						 <li><img data-target="0" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/genre_pic1021.png" alt=""  id="1021"/></li>
						 <li><img data-target="0" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/genre_pic1022.png" alt=""  id="1022"/></li>
						 <li><img data-target="0" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/genre_pic1023.png" alt=""  id="1023"/></li>
						 <li><img data-target="0" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/genre_pic1024.png" alt=""  id="1024"/></li>
					 </ul>
				 </div>
				
			 </div> 
			 <div class="itemAdGroup">
			     <div class="topTitle">
				     <button class="btn btn-primary btnTitle">广告终端格式</button>				 
				 </div>								 
			 </div>			 		     		     
		     <div class="uploadVideoTable">
			     <div class="left uploadNav">
				     <ul>
					     <li > 
						     <img src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/mobileIcon.png" alt="" />
							 <span>手机</span>
						 </li>
						 <li class="selectedUploaded">
						     <img src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/pcIcon.png" alt="" />
							 <span>PC</span>
						 </li>
						 <li>
						     <img src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/padIcon.png" alt="" />
							 <span>PAD</span>
						 </li>
						 <li>
						     <img src="/Lvscore_Advertiser_Maven/advertiserWeb/static/images/tvIcon.png" alt="" />
							 <span>互联网电视</span>
						 </li>
					 </ul>
				 </div>
			     <div class="left uploadContent">
				     <div class="form-group form-inline">
					     <label>广告时长：<span id="duration">0</span><span>   (秒数)</span></label>
						<!--<p class="tipsContent">支持<span> MOV、MP4、MPV、3GP、AVI </span>格式，单个视频在<span> 0Kb-50M </span>之间，如果无法上传视频，请核实视频大小和格式。</p>-->
						 <p class="tipsContent">支持<span> MP4（视频编码为h.264） </span>格式，单个视频在<span> 0Kb-50M </span>之间，如果无法上传视频，请核实视频大小和格式。</p>
					 </div>
					 <div class="adCoverUpload" style="height:430px">	         				     				 					    
					     <div class="uploadBtnBg">
					         <!-- <input type="file" class="uploadBtnHandle"/> --> 
					         <input type="file" name="uploadVideo" class="uploadBtnHandle" id="uploadVideo"/> 
					     </div>
					     <div class="uploadRateBar hide">
					         <label><span  id="videoMsg">读者V2015.02</span>(<span id="videoLength"></span>)</label>
							 <button class="btn btn-primary" data-toggle="modal"  data-target=".videoModal"  onclick="flashImg.loadingVideo(loadingVideoUrl)">预览</button>
					         <button class="btn btn-primary" onclick="delVideo()">删除</button>
							 <div class="uploadRateBarBox">
							     <span></span>
							 </div>
							 <div><label>上传进度：</label><span style="color:red" id="loadingFont">0%</span></div>
					     </div>					    
				     </div>			   				 
				 </div>
				 <div class="clear"></div>
			 </div>
		    <input name="videoUrl" id="videoUrl" value=""  type="hidden" />
		    <button data-loading="0" class="btn btn-primary modifyImgSignBtn"  ng-disabled="registerForm.$invalid">提交</button>
		 <!-- end -->
		 </form>
		 <!-- video modal -->
		 <div class="modal fade videoModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
			 <div class="modal-dialog modal-lg">
				 <div class="modal-content"  style="position:relative">
					 <div id="flashVideoBox" style="height:560px;"></div>
					 <div onclick="flashImg.closeVideo($(this))" data-dismiss="modal" style="font-size:18px;position:absolute;top:4px;right:8px;color:#0787FF;cursor:pointer;">X</div>
				 </div>
			 </div>
		 </div>


		 <script type="text/javascript" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/vendor/ckplayer/ckplayer.js"></script>
	     <script type="text/javascript" src="/Lvscore_Advertiser_Maven/advertiserWeb/controller/uploadAd/videoAd/index.js"></script>
         <script type="text/javascript" src="/Lvscore_Advertiser_Maven/advertiserWeb/static/js/transition.js"></script>
		 <script type="text/javascript">
			 flashImg.loadingVideo=function(url){
				 console.log("ddd");
				 var flashvars={
					 f:url,//视频url
					 c:0,
					 b:1,
					 //i:'http://localhost:8089/pictures/2017/01/10/1484016216144/1484016216145.jpg', //视频封面url
					 my_url:window.location.href  //分享地址
				 };
				 var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:'transparent'};
				 CKobject.embedSWF('/Lvscore_Advertiser_Maven/advertiserWeb/static/vendor/ckplayer/ckplayer.swf','flashVideoBox','ckplayer_a1','100%','100%',flashvars,params);
			 };
			 flashImg.closeVideo=function(ele){
				 ele.siblings("div#flashVideoBox").empty();
			 };
		 </script>
	 </body>
</html>